<script setup lang="ts">
  // import HelloWorld from "@/components/HelloWorld.vue";
  const title = ref("sadfasdf");
  import variables from "@/styles/variables.module.scss";
  console.log(variables.bgColor);
  import { useCounterStore } from "@/store/counter";
  const counterStore = useCounterStore();

  // console.log(import.meta.env.VITE)
  ElMessage.success("测试elementmessage");
</script>

<template>
  <div>
    {{ counterStore.double }}
    <el-button type="primary" @click="counterStore.increment"
      >count++</el-button
    >
  </div>
  <div
    style="width: 200px; height: 200px; color: #fff"
    :style="{ 'background-color': variables.bgColor }"
  >
    测试ts中使用scss变量
  </div>
  <div class="appClass">
    {{ title }}
    <div style="padding: 20px">
      <el-button type="info"
        ><svg-icon icon-class="test" />SVG 本地图标</el-button
      >
      <el-button type="success"><i-ep-SuccessFilled />Success</el-button>
      <el-button type="info"><i-ep-InfoFilled />Info</el-button>
      <el-button type="warning"><i-ep-WarningFilled />Warning</el-button>
      <el-button type="danger"><i-ep-WarnTriangleFilled />Danger</el-button>
    </div>

    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style lang="scss" scoped>
  .appClass {
    background-color: $bg-color;
  }
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
  }
</style>
